<template>
    <view class="address-info-card">
        <view class="address-item address-item-pickup">
            <text class="item-type-tag pickup-tag">取</text>
            <view class="address">
                <text class="address-name">{{ data.repositoryName }}</text>
                <text class="address-text" v-if="showPickupAddress">{{ data.address }}</text>
            </view>
        </view>
        <view class="address-item">
            <text class="item-type-tag sent-tag">送</text>
            <view class="address">
                <text class="address-name">{{ data.storeLinkName || data.storeName }}</text>
                <text class="address-text">{{ data.storeAddress }}</text>
            </view>
            <view class="send-lbs" @click.stop="gotoMap" v-if="state != 4">
                <text class="text-icon icon-item-lbs"></text>
                <text>{{ data.disance }}km</text>
            </view>
        </view>
    </view>
</template>

<script>
import { toMapAPP } from "@/uni-sub-base/utils/mapUtil"
export default {
    props: {
        showPickupAddress: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Object,
            default: () => {},
        },
        state: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {}
    },
    mounted() {},
    onShow() {},
    methods: {
        gotoMap() {
            //#ifdef APP-PLUS
            let lat = 0,
                lng = 0,
                name = ""
            if (this.state == 1) {
                //待取货导航到取货仓库
                lat = this.data.latitude
                lng = this.data.longitude
                name = this.data.repositoryName
            } else if (this.state == 2 || this.state == 3) {
                //待配送和配送中导航到送货门店
                lat = this.data.storeLatitude
                lng = this.data.storeLongitude
                name = this.data.storeLinkName || this.data.storeName
            }
            console.log(lat, lng, name)
            toMapAPP(lat, lng, name)
            // #endif
            // #ifndef APP-PLUS
            this.easyToast("请在app中使用导航功能")
            //#endif
        },
    },
}
</script>

<style lang="scss">
.address-info-card {
    display: flex;
    flex-direction: column;
    background: #f5f9fc;
    padding: $app-page-padding;
    border-radius: 8rpx;

    .address-item {
        display: flex;
        flex-direction: row;

        .item-type-tag {
            margin-top: 6rpx;
        }

        .address {
            display: flex;
            flex-direction: column;
            flex: 1;

            .address-name {
                margin-bottom: 8rpx;
            }

            .address-text {
                color: $app-color-text-desc;
                font-size: $font-size-28;
            }
        }

        .send-lbs {
            margin-left: 40rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .icon-item-lbs {
                width: 64rpx;
                height: 64rpx;
                margin-bottom: 4rpx;
                background-image: url(@/pages_tms/static/icon/icon_item-lbs.png);
            }
        }
    }

    .address-item-pickup {
        margin-bottom: 32rpx;
    }

    .item-type-tag {
        width: 40rpx;
        height: 40rpx;
        border-radius: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 14rpx;
        font-size: $font-size-20;
        color: $color-white;
    }

    .pickup-tag {
        background: $color-tms-blue-1;
    }

    .sent-tag {
        background: $color-tms-green-1;
    }

    .address-name {
        font-weight: bold;
        font-size: $font-size-36;
    }
}
</style>
